<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            text-decoration: none;
            list-style: none;
            background-repeat: no-repeat;
            font-family: var(--font);
            color: #f48b8f;
            font-size: 20px;
            font-weight: 600;
        }

        :root {

            --button-bg1: #fbfaf8;
            --color: linear-gradient(-225deg, #D4FFEC 0%, #57F2CC 48%, #4596FB 100%);
            --button-bg: var(--button-bg1);
        }

        .calculator {
            width: 450px;
            height: 750px;
            margin: 50px auto;
            padding-top: 30px;
            background-color: var(--color);
            border-radius: 30px;
            box-shadow: inset 0px 0px 20px #57F2CC, inset -5px -5px 6px #4596FB;
        }

        .inp {
            display: flex;
            width: 85%;
            height: 200px;
            margin: 0 auto;
            border-radius: 30px;
            margin-bottom: 30px;
            align-items: center;
        }

        .gradualBox {
            width: 97%;
            height: 95%;
            margin: 0 auto;
            border-radius: 30px;
            background: var(--color);
            display: flex;
            align-items: end;
        }

        .inp .output {
            width: 100%;
            height: 50px;
            text-align: right;
            padding-right: 25px;
            padding-bottom: 10px;
            box-sizing: border-box;
            font-size: 24px;
            font-weight: 800;
            border: none;
            background-color: transparent;
            outline: none;
            color: #0951a8 !important;
        }

        .theme {
            width: 100%;
            height: 60px;
            display: flex;
            gap: 15px;
            justify-content: center;
        }

        .theme ul {
            width: 90px;
            height: 60px;
            border: none;
            border-radius: 20px;
            background: #fbfaf8;
            box-shadow: inset 5px 5px 6px #e5d3d4, inset -5px -5px 6px #ffffff;
        }

        .theme ul>button {
            width: 100%;
            height: 100%;
            border: none;
            border-radius: 20px;
            background: #fbfaf8;
            box-shadow: inset 5px 5px 6px #ffcfd2, inset -5px -5px 6px #ffffff;
            background: linear-gradient(to bottom, #fff, #fff);
            cursor: pointer;
        }

        .theme li {
            width: 350px;
            height: 320px;
            position: relative;
            left: -180px;
            top: 5px;
            background-color: white;
            display: none;
            opacity: 0.75;
        }

        .theme .prompt i {
            display: block;
            width: 25px;
            height: 25px;
            position: absolute;
            right: 0;
        }

        .theme .prompt p {
            text-align: center;
            padding: 90px 0;
            box-sizing: border-box;
        }

        .theme .prompt span {
            cursor: pointer;
        }

        .theme .prompt input {
            width: 70%;
            height: 50px;
            text-align: center;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, 0);
        }

        .Fontcancel {
            position: absolute;
            left: 50px;
            bottom: 50px;
        }

        .highlight {
            background-color: pink;
        }

        .Fontconfirm {
            position: absolute;
            right: 50px;
            bottom: 50px;
        }

        .Colorcancel {
            position: absolute;
            left: 50px;
            bottom: 50px;
        }

        .Colorconfirm {
            position: absolute;
            right: 50px;
            bottom: 50px;
        }

        .number {
            width: 100%;
            height: 470px;
            display: flex;
            gap: 15px;
            align-content: center;
            flex-wrap: wrap;
            padding: 22.5px;
            box-sizing: border-box;
            margin-top: -10px;
            border-radius: 30px;
        }

        .number button {
            width: 90px;
            height: 70px;
            border: none;
            border-radius: 20px;
            background: #fbfaf8;
            box-shadow: inset 5px 5px 6px #57F2CC, inset -5px -5px 6px #D4FFEC;
            background: var(--button-bg);
            cursor: pointer;
            color: #57F2CC;
        }

        .number #str {
            box-shadow: inset 5px 5px 6px #57F2CC, inset -5px -5px 6px #D4FFEC;
            background: linear-gradient(-225deg, #D4FFEC 0%, #57F2CC 48%, #4596FB 100%);
            color: #fff;
        }
    </style>

</head>

<body>
    <div class="calculator">
        <div class="inp">
            <div class="gradualBox">
                <input type="text" class="output">
            </div>
        </div>

        <div class="number">
            <button class="clear" id="str">AC</button>
            <button id="str">÷</button>
            <button id="str">×</button>
            <button id="str">C</button>
            <button>7</button>
            <button>8</button>
            <button>9</button>
            <button id="str">-</button>
            <button>4</button>
            <button>5</button>
            <button>6</button>
            <button id="str">+</button>
            <button>1</button>
            <button>2</button>
            <button>3</button>
            <button id="str">(</button>
            <button>0</button>
            <button>.</button>
            <button>=</button>
            <button id="str">)</button>
        </div>
    </div>
    <script>
        const output = document.querySelector('.output');
        const numberButtons = Array.from(document.querySelectorAll('.number button'));
        const acButton = numberButtons.find(button => button.textContent === "AC");
        const cButton = numberButtons.find(button => button.textContent === "C");
        const equalsButton = numberButtons.find(button => button.textContent === "=");

        numberButtons.forEach(button => {
            button.addEventListener('click', () => {
                if (button.textContent !== 'AC' && button.textContent !== 'C' && button.textContent !== '=') {
                    output.value += button.textContent;
                }
            });
        });

        acButton.addEventListener('click', () => {
            output.value = '';
        });

        cButton.addEventListener('click', () => {
            output.value = output.value.slice(0, -1);
        });

        function calculateExpression(expression) {
            if (expression.includes('(')) {
                let left = expression.indexOf('(');
                let right = expression.indexOf(')');
                let subExp = expression.substring(left + 1, right);
                let subResult = calculateExpression(subExp);
                expression = expression.substring(0, left) + subResult + expression.substring(right + 1);
                return calculateExpression(expression);
            }

            const operators = {
                '+': 1,
                '-': 1,
                '×': 2,
                '÷': 2,
            };

            let operatorStack = [];
            let numberStack = [];
            let number = '';

            for (let i = 0; i < expression.length; i++) {
                let char = expression[i];
                if (!operators[char]) {
                    number += char;
                    continue;
                } else {
                    if (char === '-' && (i === 0 || expression[i - 1] === '(')) {
                        number += char;
                        continue;
                    }
                    numberStack.push(parseFloat(number));
                    number = '';
                }

                while (operatorStack.length && operators[char] <= operators[operatorStack[operatorStack.length - 1]]) {
                    calc(numberStack, operatorStack);
                }

                operatorStack.push(char);
            }

            numberStack.push(parseFloat(number));

            while (operatorStack.length) {
                calc(numberStack, operatorStack);
            }

            return numberStack[0];
        }

        function calc(numberStack, operatorStack) {
            const number2 = numberStack.pop();
            const number1 = numberStack.pop();
            const operator = operatorStack.pop();
            let result;

            switch (operator) {
                case '+':
                    result = number1 + number2;
                    break;
                case '-':
                    result = number1 - number2;
                    break;
                case '×':
                    result = number1 * number2;
                    break;
                case '÷':
                    result = number1 / number2;
                    break;
            }

            numberStack.push(result);
        }

        equalsButton.addEventListener('click', () => {
            const expression = output.value;
            const result = calculateExpression(expression);
            output.value = result;
        });

        const Convertprompt = document.querySelector('.convert .prompt');
        const convertedInput = document.getElementById('converted');
        const closeIcon = document.querySelector('.convert .prompt i');

        closeIcon.addEventListener('click', () => {
            Convertprompt.style.display = 'none';
        });

        const ThemeColorcancel = document.querySelector('.color-cancel');
        const ThemeColorprompt = document.querySelector('.color-confirm');

        ThemeColorcancel.addEventListener('click', () => {
            ThemeColorprompt.style.display = 'none';
        });

        ThemeColorprompt.addEventListener('click', () => {
            ThemeColorprompt.style.display = 'none';
        });

        window.onload = initTheme;
    </script>
</body>

</html>